/**
 * @function
 * @name tabs
 * @description Tab to transition through panes.
 * @memberof HQ.components
 *
 * @param {object} enhancementRoot - The current DOM element.
 */
HQ.components.tabs = function (enhancementRoot) {

    $(this.elems).each(function () {

        // GLOBAL VARS
        // ==============================================================
        var $inst             = $(this);
        var tabSelected       = $inst.data('tab-selected'); // Select tab in page load
        var tabFadeTransition = $inst.data('tab-fade'); // Allow fade transition between tab
        var $tabsBtns         = $('.tabs-wrapper .toggle-btn', $inst);
        var scrollSpacing     = -10;

        // Update the hash property of the current page
        var updateHash        = $inst.data('tab-update-hash') ? $inst.data('tab-update-hash') : false;

        // Prevent hashchange process when user click on tab buttons.
        var clickProcess      = false;

        // HASH TAG: The hash tag has priority over the tabSelected.
        // To prevent browser anchor jump behavior we will add 'Panel' after de result.
        var hash = window.location.hash;

        // FUNCTIONS
        // ==============================================================
        
        /**
         * @function
         * @name _tabScrollTo
         * @description Scroll to above the nav tab.
         * @memberof HQ.components.tabs
         * @param {object} p_item The tab to scroll to.
         * @private
         */
        function _tabScrollTo(p_item) {
            var $this = p_item;
            if ($this) {
                var position = Math.round($this.offset().top + scrollSpacing);
                window.scrollTo(0, position);
            }
        }
        
        /**
         * @function
         * @name _deepLinking
         * @description Select the right tab trigger by the hash in the url.
         * @memberof HQ.components.tabs
         * @private
         */
        function _deepLinking(p_hash, p_scroll) {
            $.each($tabsBtns, function () {
                var $this = $(this);
                var id    = $this.attr('href');
                if (id === p_hash) {
                    $this.trigger('click');

                    if (p_scroll) {
                        _tabScrollTo($this);
                    }
                }
            });
        }

        /**
         * @function
         * @name _tabFadeTransition
         * @description To make tabs fade in.
         * @memberof HQ.components.tabs
         * @private
         */
        function _tabFadeTransition() {
            $.each($tabsBtns, function () {
                var id        = $(this).attr('href');
                var $tabPanes = $(id);
                $tabPanes.addClass('fade');
            });
        }

        /**
         * @function
         * @name _tabPaneShow
         * @description Select/show the current collapse section.
         * @memberof HQ.components.tabs
         *
         * @param {object} p_element The current tab button.
         * @private
         */
        function _tabPaneShow(p_element) {
            var id        = p_element.attr('href');
            var $tabPanes = $(id);
            $tabPanes.addClass('fade');
            $tabPanes.addClass('in');
            $tabPanes.addClass('active');
        }

        /**
         * @function
         * @name _tabSelected
         * @description To select specific tabs.
         * @memberof HQ.components.tabs
         *
         * @param {integer} p_item Tab to show.
         * @private
         */
        function _tabSelected(p_item) {
            var $tabSelected = $($tabsBtns[p_item - 1]);

            if ($tabsBtns.length > 0 && $tabSelected.length > 0) {
                if ($tabSelected.hasClass('active')) {
                    _tabPaneShow($tabSelected);
                } else {
                    $tabSelected.addClass('active');
                    $tabSelected.trigger('click');
                }
            }
        }

        // EVENTS
        // ==============================================================
        
        // Activated the current pane
        if ($tabsBtns.length > 0) {
            $tabsBtns.click(function (e) {
                e.preventDefault();
                clickProcess = true;
                var $this = $(this);
                var id    = $this.attr('href').replace('Panel', '');

                // Selected tab.
                $this.tab('show');

                // Set hash
                if(updateHash){ window.location.hash = id; }
            });
        }

        // To make tabs fade in.
        if (typeof(tabFadeTransition) !== "undefined" && tabFadeTransition) {
            _tabFadeTransition();
        }

        // In page load, selected the pane to show.
        if (updateHash && hash.length > 0) {
            _deepLinking(hash + 'Panel');

        } else if (typeof(tabSelected) !== "undefined" && tabSelected) {
            _tabSelected(tabSelected);
        }

        // Detect hash change
        $(window).bind('hashchange', function () {
            if(updateHash){
                var hash = window.location.hash+'Panel';
    
                if (!clickProcess) {
                    _deepLinking(hash, true);
                }
                clickProcess = false;
            }
        });

        // EXTERNAL API
        // ==============================================================

        $inst.on('tabScrollTo.TABS', function (e, p_currentSelectedItem) {
            _tabScrollTo(p_currentSelectedItem);
        });
        
        $inst.on('tabFadeTransition.TABS', function () {
            _tabFadeTransition();
        });

        $inst.on('tabSelected.TABS', function (e, p_currentSelectedItem) {
            _tabSelected(p_currentSelectedItem);
        });

        $inst.on('updateHash.TABS', function (e, p_updateHash) {
            updateHash = p_updateHash;
        });

    });
};